<template>
  <div class="load-dashboard">
    <!-- 第一行 -->
    <div class="chart-row">

      <div class="chart-container upf-node" v-for="index in [0, 1]" :key="index">
        <div class="chart-wrapper">
          <div class="chart" :id="'chart-' + index"></div>
          <div class="bar-chart" :id="'bar-chart-' + index"></div>
        </div>

        <h3>{{ chartsData[index].title }}</h3>
      </div>
      <div class="chart-container server-node">
        <div class="chart-wrapper">
          <div class="chart" id="chart-2"></div>
        </div>
        <h3>{{ chartsData[2].title }}</h3>
      </div>
    </div>

    <!-- 第二行 -->
    <div class="chart-row">

      <div class="chart-container upf-node" v-for="index in [3, 4]" :key="index">
        <div class="chart-wrapper">


          <div class="chart" :id="'chart-' + index"></div>
          <div class="bar-chart" :id="'bar-chart-' + index"></div>
        </div>

        <h3>{{ chartsData[index].title }}</h3>
      </div>
      <div class="chart-container server-node">
        <div class="chart-wrapper">
          <div class="chart" id="chart-5"></div>
        </div>
        <h3>{{ chartsData[5].title }}</h3>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { chartConfig } from "@/config/chartConfig";

export default {
  name: "DoubleRingPieCharts",
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      chartsData: [
        // { title: "UPF0", load: 0.65, communication: 30, computation: 40, storage: 30, traffic1: 1200, traffic2: 800 },
        // { title: "UPF2", load: 0.75, communication: 30, computation: 40, storage: 30, traffic1: 1500, traffic2: 500 },
        // { title: "服务端1", load: 0.85, traffic1: 1800, traffic2: 400 },
        // { title: "UPF1", load: 0.45, communication: 40, computation: 40, storage: 30, traffic1: 900, traffic2: 900 },
        // { title: "UPF3", load: 0.55, communication: 30, computation: 40, storage: 30, traffic1: 1200, traffic2: 600 },
        // { title: "服务端2", load: 0.35, traffic1: 700, traffic2: 900 },
        { title: "UPF0", load: 0, communication: 0, computation: 0, storage: 0, traffic1: 0, traffic2: 0 },
        { title: "UPF2", load: 0, communication: 0, computation: 0, storage: 0, traffic1: 0, traffic2: 0 },
        { title: "服务端1", load: 0, traffic1: 0, traffic2: 0 },
        { title: "UPF1", load: 0, communication: 0, computation: 0, storage: 0, traffic1: 0, traffic2: 0 },
        { title: "UPF3", load: 0, communication: 0, computation: 0, storage: 0, traffic1: 0, traffic2: 0 },
        { title: "服务端2", load: 0, traffic1: 0, traffic2: 0 },
      ],
      chartInstances: [],
      barChartInstances: [],
      decision: "",
      yoloPath: "",
      ftpPath: "",
    };
  },
  mounted() {
    this.initCharts();
  },
  beforeUnmount() {
    this.chartInstances.forEach((chart) => {
      chart.dispose();
    });
    this.barChartInstances.forEach((chart) => {
      chart.dispose();
    });
  },
  watch: {
    data: {
      deep: true,
      handler(newVal) {
        if (newVal) {
          this.chartsData = [
            {
              title: "UPF0",
              load: newVal.upf0_load || 0.1,
              communication: newVal.upf0_comm || 0.1,
              computation: newVal.upf0_comp || 0.1,
              storage: newVal.upf0_cach || 0.1,
              traffic1: newVal.upf0_prediction_1 || 0.1,
              traffic2: newVal.upf0_prediction_2 || 0.1,
            },
            {
              title: "UPF2",
              load: newVal.upf2_load || 0.1,
              communication: newVal.upf2_comm || 0.1,
              computation: newVal.upf2_comp || 0.1,
              storage: newVal.upf2_cach || 0.1,
              traffic1: newVal.upf2_prediction_1 || 0.1,
              traffic2: newVal.upf2_prediction_2 || 0.1,
            },
            {
              title: "服务端1",
              load: newVal.server0_load || 0.1,
              communication: newVal.server0_comm || 0.1,
              computation: newVal.server0_comp || 0.1,
              storage: newVal.server0_cach || 0.1,
              traffic1: 0,
              traffic2: 0,
            },
            {
              title: "UPF1",
              load: newVal.upf1_load || 0.1,
              communication: newVal.upf1_comm || 0.1,
              computation: newVal.upf1_comp || 0.1,
              storage: newVal.upf1_cach || 0.1,
              traffic1: newVal.upf1_prediction_1 || 0.1,
              traffic2: newVal.upf1_prediction_2 || 0.1,
            },
            {
              title: "UPF3",
              load: newVal.upf3_load || 0.1,
              communication: newVal.upf3_comm || 0.1,
              computation: newVal.upf3_comp || 0.1,
              storage: newVal.upf3_cach || 0.1,
              traffic1: newVal.upf3_prediction_1 || 0.1,
              traffic2: newVal.upf3_prediction_2 || 0.1,
            },
            {
              title: "服务端2",
              load: newVal.server1_load || 0.1,
              communication: newVal.server1_comm || 0.1,
              computation: newVal.server1_comp || 0.1,
              storage: newVal.server1_cach || 0.1,
              traffic1: 0,
              traffic2: 0,
            },
          ];
          this.updateCharts();
          this.ftpPath = "文件传输客户端 => UPF-1 => UPF-2 => 服务端1";
          this.yoloPath = "目标检测客户端 => UPF-" + newVal.origin_path[0] + " => UPF-" + newVal.origin_path[1] + " => 服务端" + (newVal.origin_path[1] - 1);
          this.decision = "目标检测客户端 => UPF-" + newVal.strategy_path[0] + " => UPF-" + newVal.strategy_path[1] + " => 服务端" + (newVal.strategy_path[1] - 1);
        }
      },
    },
  },
  methods: {
    initCharts() {
      this.chartsData.forEach((item, index) => {
        // 初始化饼图
        const chartDom = document.getElementById(`chart-${index}`);
        const myChart = echarts.init(chartDom);

        const loadColor = item.load < 0.6 ? "#91cc75" : item.load < 0.8 ? "#fac858" : "#e44b18";

        const series = [
          {
            name: "负载占比",
            type: "pie",
            selectedMode: "single",
            radius: [0, "50%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              position: "inner",
              fontSize: 20,
              formatter: (params) => {
                return params.name === "负载" ? `${params.percent}%` : "";
              },
              textStyle: {
                color: "#fff",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: item.load * 100,
                name: "负载",
                itemStyle: { color: loadColor },
              },
              {
                value: (1 - item.load) * 100,
                name: "剩余",
                itemStyle: { color: "transparent" },
              },
            ],
          },
        ];

        series.push({
          name: "资源占比",
          type: "pie",
          selectedMode: "single",
          radius: ["60%", "80%"],
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 1,
          },
          label: {
            position: "outside",
            fontSize: 20,
            formatter: (params) => {
              if (!params.name.includes("剩余")) {
                return `${params.name}`;
              }
              return "";
            },
            textStyle: {
              color: "#fff",
            },
          },
          labelLine: {
            show: true,
            length: 10,
            length2: 0,
            smooth: 0.2,
          },
          data: [
            {
              value: item.communication,
              name: "通",
              itemStyle: {
                color: item.communication < 0.6 ? "#91cc75" : item.communication < 0.8 ? "#fac858" : "#e44b18",
              },
            },
            {
              value: 100 - item.communication,
              name: "通-剩余",
              itemStyle: { color: "transparent" },
            },
            {
              value: item.computation,
              name: "算",
              itemStyle: {
                color: item.computation < 0.6 ? "#91cc75" : item.computation < 0.8 ? "#fac858" : "#e44b18",
              },
            },
            {
              value: 100 - item.computation,
              name: "算-剩余",
              itemStyle: { color: "transparent" },
            },
            {
              value: item.storage,
              name: "存",
              itemStyle: {
                color: item.storage < 0.6 ? "#91cc75" : item.storage < 0.8 ? "#fac858" : "#e44b18",
              },
            },
            {
              value: 100 - item.storage,
              name: "存-剩余",
              itemStyle: { color: "transparent" },
            },
          ],
        });

        const option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}:{c}%",
          },
          series,
        };

        myChart.setOption(option);
        this.chartInstances.push(myChart);

        // 如果不是服务端，初始化柱状图
        if (!item.title.includes("服务端")) {
          const barChartDom = document.getElementById(`bar-chart-${index}`);
          const barChart = echarts.init(barChartDom);

          const barOption = {
            tooltip: {
              trigger: "item",
              axisPointer: {
                type: "shadow",
              },
              formatter: (params) => {
                return `${params.name}数据包: ${params.value}`;
              }
            },
            grid: {
              left: "10%",
              right: "10%",
              top: "20%",
              bottom: "20%",
            },
            xAxis: {
              type: "category",
              data: ["业务1", "业务2"],
              axisLabel: {
                color: "#fff",
                fontSize: 13,
              },
            },
            yAxis: {
              type: "value",
              show: true,
              axisLabel: {
                show: false,
              },
              min: 0, // 设置最小值
              max: chartConfig.barChart.max // 设置最大值
            },
            series: [
              {
                data: [
                  {
                    value: item.traffic1,
                    itemStyle: {
                      color: "#4BC0C0",
                    },
                  },
                  {
                    value: item.traffic2,
                    itemStyle: {
                      color: "#4BC0C0",
                    },
                  },
                ],
                type: "bar",
                barWidth: "40%",
                label: {
                  show: true,
                  position: "top",
                  color: "#fff",
                  fontSize: 14,
                  fontWeight: "bold"
                },
              },
            ],
          };

          barChart.setOption(barOption);
          this.barChartInstances.push(barChart);
        }

        window.addEventListener("resize", () => {
          myChart.resize();
          if (!item.title.includes("服务端")) {
            const barChart = this.barChartInstances[index];
            if (barChart) barChart.resize();
          }
        });
      });
    },

    updateCharts() {
      this.chartsData.forEach((item, index) => {
        // 更新饼图
        const myChart = this.chartInstances[index];
        if (!myChart) return;

        const loadColor = item.load < 0.6 ? "#91cc75" : item.load < 0.8 ? "#fac858" : "#e44b18";

        const series = [
          {
            name: "负载占比",
            type: "pie",
            selectedMode: "single",
            radius: [0, "50%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              position: "inner",
              fontSize: 20,
              formatter: (params) => {
                return params.name === "负载" ? `${params.percent}%` : "";
              },
              textStyle: {
                color: "#fff",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: (item.load * 100).toFixed(1),
                name: "负载",
                itemStyle: { color: loadColor },
              },
              {
                value: ((1 - item.load) * 100).toFixed(1),
                name: "剩余",
                itemStyle: { color: "transparent" },
              },
            ],
          },
        ];

        series.push({
          name: "资源占比",
          type: "pie",
          selectedMode: "single",
          radius: ["60%", "80%"],
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 1,
          },
          label: {
            position: "outside",
            fontSize: 20,
            formatter: (params) => {
              if (!params.name.includes("剩余")) {
                return `${params.name}`;
              }
              return "";
            },
            textStyle: {
              color: "#fff",
            },
          },
          labelLine: {
            show: true,
            length: 10,
            length2: 0,
            smooth: 0.2,
          },
          data: [
            {
              value: (item.communication * 100).toFixed(1),
              name: "通",
              itemStyle: {
                color: item.communication < 0.6 ? "#91cc75" : item.communication < 0.8 ? "#fac858" : "#e44b18",
              },
            },
            {
              value: ((1 - item.communication) * 100).toFixed(1),
              name: "通-剩余",
              itemStyle: { color: "transparent" },
            },
            {
              value: (item.computation * 100).toFixed(1),
              name: "算",
              itemStyle: {
                color: item.computation < 0.6 ? "#91cc75" : item.computation < 0.8 ? "#fac858" : "#e44b18",
              },
            },
            {
              value: ((1 - item.computation) * 100).toFixed(1),
              name: "算-剩余",
              itemStyle: { color: "transparent" },
            },
            {
              value: (item.storage * 100).toFixed(1),
              name: "存",
              itemStyle: {
                color: item.storage < 0.6 ? "#91cc75" : item.storage < 0.8 ? "#fac858" : "#e44b18",
              },
            },
            {
              value: ((1 - item.storage) * 100).toFixed(1),
              name: "存-剩余",
              itemStyle: { color: "transparent" },
            },
          ],
        });

        // 更新柱状图
        if (!item.title.includes("服务端")) {
          if (index > 1) {
            index = index - 1;
          }
          const barChart = this.barChartInstances[index];
          if (barChart) {
            const barOption = {
              series: [
                {
                  data: [
                    {
                      value: item.traffic1.toFixed(0),
                      itemStyle: {
                        color: "#4BC0C0",
                      },
                    },
                    {
                      value: item.traffic2.toFixed(0),
                      itemStyle: {
                        color: "#4BC0C0",
                      },
                    },
                  ],
                },
              ],
            };
            barChart.setOption(barOption);
          }
        }

        const option = {
          tooltip: {
            trigger: "item",
            formatter: (params) => {
              return `${params.name}: ${params.value}%`;
            },
          },
          series,
        };

        myChart.setOption(option);
      });
    },
  },
};
</script>

<style scoped>
.load-dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-title {
  text-align: center;
  color: white;
}

.chart-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
  margin-top: 80px;
}

/* UPF节点容器 - 需要显示两个图表 */
.chart-container.upf-node {
  flex: 0 0 37%; /* 增加宽度占比 */
}

/* 服务端节点容器 - 只需要显示一个图表 */
.chart-container.server-node {
  flex: 0 0 27%; /* 减少宽度占比 */
}

.chart-wrapper {
  display: flex;
  width: 100%;
  height: 200px;
}

/* UPF节点的饼图 */
.upf-node .chart {
  flex: 0 0 66%; /* 固定50%宽度 */
}

/* UPF节点的柱状图 */
.upf-node .bar-chart {
  flex: 0 0 33%; /* 固定50%宽度 */
}

/* 服务端节点的饼图 */
.server-node .chart {
  flex: 1; /* 占满全部宽度 */
}

h3 {
  text-align: center;
  color: white;
  font-size: 30px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .chart-row {
    flex-direction: column;
  }
  .chart-container {
    flex: 0 0 100% !important;
  }
}

.overall-decision {
  margin-top: 80px;
  padding: 5px;
  background-color: #f5f5f5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.overall-decision div {
  margin: 0;
  font-size: 18px;
  color: #333;
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
}

.overall-decision div span {
  display: inline-block;
  width: 250px;
  text-align: center;
}

.overall-decision div:last-child {
  background-color: #e8f5e9;
  color: #2e7d32;
  font-weight: bold;
}

.overall-decision div:last-child span {
  font-weight: bold;
}

@media (max-width: 768px) {
  .overall-decision div {
    font-size: 16px;
    padding: 8px 12px;
  }
}
</style>
